<template>
	<div id="app">
		<div class="title">资金明细</div>
		<el-row class="tableBtnTop">
			<el-select v-model="type" placeholder="请选择" class="filter">
				<el-option label="用户昵称" value="user_name"></el-option>
				<el-option label="用户手机" value="user_tel"></el-option>
				<el-option label="用户ID" value="user_id"></el-option>
			</el-select>
			<div class="search">
				<el-input placeholder="请输入内容" @keyup.enter.native="onSearch" v-model.trim="keyword">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
		</el-row>
		<el-table :data="tableData" border v-loading="loading">
			<el-table-column prop="user" label="用户" :show-overflow-tooltip="true">
				<template slot-scope="scope">
						<div class="userHead" @click="$router.push(`/user/detail/${scope.row.user_id}`)">
								<img :src="scope.row.avatar" class="square" />
								{{scope.row.nick_name}}
						</div>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="资金ID" :show-overflow-tooltip="true" min-width="50"></el-table-column>
			<el-table-column prop="type" label="资金类型" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column label="创建时间" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{scope.row.time_created | dateFormat}}
				</template>
			</el-table-column>
			<el-table-column prop="money" label="金额" :show-overflow-tooltip="true" min-width="60">
				<template slot-scope="scope">
					<font color="#F30" v-if="scope.row.income > scope.row.pay"><span style="visibility:hidden;">+</span>{{scope.row.income | transPrice}}</font>
					<font color="#3cb72d" v-else>-{{scope.row.pay | transPrice}}</font>
				</template>
			</el-table-column>
			<el-table-column prop="status_text" label="备注" :show-overflow-tooltip="true"></el-table-column>
		</el-table>
		<div class="paginationBlock">
				<el-pagination @current-change="changePage" layout="prev, pager, next, total" :total="count" :current-page="page" :page-size="pageSize" hide-on-single-page></el-pagination>
		</div>
	</div>
</template>

<script>
import fetch from '@/api/axios';
import {sysToYuan} from '@/utils/transPrice';
import {tsToDateFormat} from '@/utils/tsToDateFormat';
export default {
	data() {
		return {
			loading: false,
			page: 1,
			pageSize: 10,
			count: 0,
			type: 'user_name',
			keyword: '',
			tableData:[],
		}
	},
	filters: {
		transPrice(p){
			return sysToYuan(p, 2);
		},
		dateFormat(t){
			return tsToDateFormat(t, 'yyyy-MM-dd hh:mm');
		},
	},
	created(){
		this.page = parseInt(this.$route.params.page || 1);
		if(this.$route.params.type){
			this.type = this.$route.params.type;
		}
		this.keyword = this.$route.params.keyword;
		this.getList();
	},
	methods: {
		onSearch(){
			let page = 1;
			let type = this.type;
			let keyword = this.keyword;
			let searchStr = '';
			if(type && keyword){
				searchStr = `/${type}/${keyword}`;
			}
			this.page = 1;
			this.getList();
			this.$router.push(`/capital/detailed/page/${page}${searchStr}`);

		},
		getList(){
			let _this = this;
			let type = this.keyword ? this.type : undefined;
			this.loading = true;
			fetch.get('/api/console/user/detailelist',{
				page: _this.page,
				type: type,
				keyword: _this.keyword
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.count = data.data.count;
					_this.pageSize = data.data.pagesize;
					_this.tableData = [...data.data.result];
				}else{
					_this.$message.error(data.message);
				}
			}).catch((err)=>{
				_this.$message.error(err.message);
			}).finally(()=>{
				_this.loading = false;
			});
		},
		changePage(page){
			let type = this.type;
			let keyword = this.keyword;
			let typeStr = !type || !keyword ? '' : `/${type}/${keyword}`;
			this.page = page;
			this.$router.replace(`/capital/detailed/page/${page}${typeStr}`);
			this.getList();
		},
	},
	mounted() {

	},
	watch: {
		'$route':function(to){
			let params = to.params;
			this.page = parseInt(params.page);
			if(params.type){
				this.type = params.type
			}
			this.keyword = params.keyword || '';
		}
	}
}
</script>
<style lang="scss" scoped>
	.title{
		margin-bottom:25px;
		font-size:21px;
		margin-top:65px;
	}
</style>